<template>
  <div class="rank" ref="rank">
      <scroll class="toplist" :data="topList" ref="toplist">
          <ul>
              <li class="item" v-for="item in topList" @click="selectItem(item)">
                  <div class="icon">
                        <img width="100" height="100" v-lazy="item.picUrl" />
                  </div>
                  <ul class="songlist">
                        <li class="song" v-for="(song,index) in item.songList">
                            <span>{{ index+1 }}</span>
                            <span>{{song.songname}} - {{song.singername}}</span>
                        </li>
                  </ul>
              </li>
          </ul>
          <div class="loading-container" v-show="topList.length<=0">
              <loading></loading>
          </div>
      </scroll>
      <router-view></router-view>
  </div>
</template>

<script>
import {getToplist} from "api/rank"
import {ERR_OK} from "api/config"
import scroll from "base/scroll/scroll"
import loading from "base/loading/loading"
import {playlistMixin} from "common/js/mixin"
import {mapMutations} from 'vuex'
    export default{
        mixins:[playlistMixin],
        created(){
            this._getToplist()
        },
        components:{scroll,loading},
        data(){
            return{
                topList:[]
            }
        },
        methods:{
            handlePlaylist(playList){
                const bottom=playList.length>0 ? '60px' : ''
                this.$refs.rank.style.bottom=bottom
                this.$refs.toplist.refresh()
            },
            _getToplist(){
                getToplist().then((res)=>{
                    if(res.code === ERR_OK){
                        this.topList=res.data.topList
                    }
                })
            },
            selectItem(item){
                this.$router.push({
                    path:`/rank/${item.id}`
                })
                this.setToplist(item)
            },
            ...mapMutations({
                setToplist:'SET_TOPLIST'
            })
        }
    }
</script>

<style scoped lang="stylus">
@import "~common/stylus/variable"
@import "~common/stylus/mixin"
    .rank
        position fixed
        width 100%
        top 88px
        bottom 0px
        .toplist
            height 100%
            overflow hidden
            .item
                display flex
                margin 0 20px
                padding-top 20px
                height 100px
                &:last-child
                    padding-bottom 20px
                .icon
                    flex 0 0 100px
                    width 100px
                    height 100px
                .songlist
                    flex 1
                    display flex
                    flex-direction column
                    justify-content center
                    padding 0 20px
                    height 100px
                    overflow hidden
                    background $color-highlight-background
                    color $color-text-d
                    font-size $font-size-small
                    .song
                        no-wrap()
                        line-height 26px
    .loading-container
        position absolute
        width 100%
        top 50%
        transform translateY(-50%)                   
</style>